<template>
	<div>
		<el-card class="box-card">
			<div slot="header">
				<span>发布商品</span>
			</div>
			<el-form ref="form" :model="form" label-width="100px" :rules="rules" label-position="left">
				<el-form-item label="商品分类">
					<el-col :span="6">
						<el-select v-model="form.cate_1st" placeholder="请选择商品一级分类">
							<el-option v-for="item in options_1st" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<el-select v-model="form.cate_2nd" placeholder="请选择商品二级分类">
							<el-option v-for="item in options_2nd" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<el-select v-model="form.cate_3rd" placeholder="请选择商品三级分类">
							<el-option v-for="item in options_3rd" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="商品名称" prop="name">
					<el-input v-model="form.name"></el-input></br>
					<span class="hint">商品标题名称长度至少3个字符，最长200个汉字</span>
				</el-form-item>
				<el-form-item label="商品卖点" prop="hotPoint">
					<el-input v-model="form.hotPoint" type="textarea"></el-input>
					<span class="hint">商品卖点不能超过140个汉字</span>
				</el-form-item>
				<el-form-item label="商品价格" prop="price">
					<el-input v-model="form.price" class="price">
						<template slot="append">元</template>
					</el-input><br>
					<span class="hint">价格必须是0-999999之间的数字，且不能高于市场价</span></br>
					<span class="hint">此价格为商品实际销售价格，如果商品存在规格，改价格显示最低价格</span>
				</el-form-item>
				<el-form-item label="市场价" prop="marketPrice">
					<el-input v-model="form.marketPrice" class="price">
						<template slot="append">元</template>
					</el-input><br>
					<span class="hint">价格必须是0-999999之间的数字，此价格仅为市场参考价，请根据实际情况认真填写</span>
				</el-form-item>
				<el-form-item label="成本价" prop="cost">
					<el-input v-model="form.cost" class="price">
						<template slot="append">元</template>
					</el-input><br>
					<span class="hint">价格必须是0-999999之间的数字，此价格为商户对所销售的商品的实际成本价进行备注记录，非必填选项，不会在前台销售页面中显示</span>
				</el-form-item>
				<el-form-item label="折扣" prop="discount">
					<el-input v-model="form.discount" class="price">
						<template slot="append">折</template>
					</el-input><br>
					<span class="hint">根据销售价与市场价比例自动生成不需要编辑</span>
				</el-form-item>
				<el-form-item label="商品库存" prop="inventory">
					<el-input v-model="form.inventory" class="price">
						<template slot="append">件</template>
					</el-input><br>
					<span class="hint">库存必须是0-999999之间的整数</span></br>
					<span class="hint">若启动了库存配置，则系统自动计算商品的总数，此处无需卖家填写</span>
				</el-form-item>
				<el-form-item label="商品货号" prop="articleNo">
					<el-input v-model="form.articleNo" class="price"></el-input><br>
					<span class="hint">商品货号是商家管理商品的编号，买家不可见</span></br>
					<span class="hint">最多输入20个字符，只支持输入中文、字母、数字、_、/、-和小数点</span>
				</el-form-item>
				<el-form-item label="商品主图" prop='img_md'>

					<single-upload :src.sync="form.img_md" upload-action='/api/upload/common'
						remove-action='/api/upload' :headers='header' :data="{type:'common'}">
					</single-upload>
					<span class="hint">上传商品默认主图，如多规格时将默认图片或分规格上传规格主图，支持jpg、if、png格式上传或从图片空间选中，建议使用尺寸
						800*800像素以上，大小不超过1M的正方形图片，上传后的图片将自动保存在图片空间的默认分类中</span>
				</el-form-item>
				<el-form-item label="商品轮播图" prop='img_md' class="banner">

					<lot-upload :src.sync="form.img_md" upload-action='/api/upload/common' remove-action='/api/upload'
						:headers='header' :data="{type:'common'}">
					</lot-upload>

					<span class="hint">上传商品默认主图，如多规格时将默认图片或分规格上传规格主图，支持jpg、if、png格式上传或从图片空间选中，建议使用尺寸
						800*800像素以上，大小不超过1M的正方形图片，上传后的图片将自动保存在图片空间的默认分类中</span>
				</el-form-item>
				<div class="detial-title">商品详情描述</div>
				<el-form-item label="商品品牌" prop="name">
					<el-input v-model="form.name"></el-input></br>
				</el-form-item>
				<el-form-item label="商品描述" prop="de">
					<div id="editor" v-model="form.detail"></div>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" @click='handleRelease'>发布商品</el-button>
				</el-form-item>
				<div class="detial-title">商品物流信息</div>
				<el-form-item label="商品分类">
					<el-col :span="6">
						<el-select v-model="form.cate_1st" placeholder="请选择商品一级分类">
							<el-option v-for="item in options_1st" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<el-select v-model="form.cate_2nd" placeholder="请选择商品二级分类">
							<el-option v-for="item in options_2nd" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<el-select v-model="form.cate_3rd" placeholder="请选择商品三级分类">
							<el-option v-for="item in options_3rd" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import { Goods, Upload, } from '@/api/';
	import wangEditor from 'wangeditor';
	import SingleUpload from '../../components/SingleUpload.vue';
	import LotUpload from '../../components/LotUpload.vue';
	export default {
		props: ["id"],
		components: {
			SingleUpload,
			LotUpload,
		},
		data() {
			return {
				editor: null,
				header: {
					Authorization: `Bearer ${sessionStorage.token}`,
				},
				input2: '',
				form: {
					title: '',
					cate_1st: '',
					cate_2nd: '',
					cate_3rd: '',
					description: '',
					price: '',
					marketPrice: '',
					cost: '',
					discount: '',
					inventory: '',
					articleNo: '',
					detail: '',

				},
				options_1st: [],
				options_2nd: [],
				options_3rd: [],
				rules: {
					name: [
						{ type: 'string', required: true, message: '请输入商品的名称', trigger: 'blur' },
						{ min: 3, max: 200, message: '商品名称长度在 3 到 200 个字符', trigger: 'blur' },
					],
					description: [{ type: 'string', required: true, message: '请输入文章描述', trigger: 'blur' },
						{ pattern: /^[\u4E00-\u9FA5]{1,140}$/, message: '商品名称长度不超过140个汉字', trigger: 'blur' },
					],
					cate_1st: [{ type: 'number', required: true, message: '请选择一级分类', trigger: 'change' }],
					cate_2nd: [{ type: 'number', required: true, message: '请选择二级分类', trigger: 'change' }],
					cate_3rd: [{ type: 'number', required: true, message: '请选择三级分类', trigger: 'change' }],
					main_photo: [{ type: 'string', required: true, message: '请上传文章主图', trigger: 'change' }],
					content: [{ type: 'string', required: true, message: '请填写文章内容', trigger: 'blur' }],
				},
			}
		},
		async mounted() {
			// //获取一级分类
			// this.options_1st = await this.loadSubcate(1);
			//加载文章详情

			let goods = await this.loadDetail(this.$route.params.id);
			console.log(goods)
			// //加载二级分类
			// this.options_2nd = await this.loadSubcate(goods.cate_1st);
			// //加载二级分类
			// this.options_3rd = await this.loadSubcate(goods.cate_2st);
			//还原表单
			this.form = goods;
			//初始化富文本编辑器
			const editor = new wangEditor("#editor");
			// 配置 onchange 回调函数，将数据同步到 vue 中
			editor.config.onchange = (newHtml) => {
				this.form.content = newHtml
			};
			// 配置 server 接口地址
			editor.config.uploadImgServer = '/upload/editor/';
			//限制图片类型
			editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png'];
			//设置token
			editor.config.uploadImgHeaders = {
				Authorization: `Bearer ${sessionStorage.token}`,
			};
			//自定义filename
			editor.config.uploadFileName = 'file';
			// 创建编辑器
			editor.create();

			//还原富文本编辑器内容
			editor.txt.html(goods.detail);
			this.editor = editor;
		},
		async created() {
			//获取一级分类
			this.options_1st = await this.loadSubcate(1);
			//默认选中第一项
			this.form.cate_1st = this.options_1st[0].id;
			console.log(this.form.cate_1st)
		},
		watch: {
			async 'form.cate_1st'(value) {
				//获取二级分类
				this.options_2nd = await this.loadSubcate(value);
				//默认选中第二项
				if (this.options_2nd.length) {
					this.form.cate_2nd = this.options_2nd[0].id;
				} else {
					this.form.cate_2nd = '';
				}

			},
			async 'form.cate_2nd'(value) {
				//获取二级分类
				this.options_3rd = await this.loadSubcate(value);
				//默认选中第三项
				if (this.options_3rd.length) {
					this.form.cate_3rd = this.options_3rd[0].id;
				} else {
					this.form.cate_3rd = '';
				}

			}
		},
		methods: {
			async loadDetail(id) {
				let { status, data } = await Goods.detail({ id });
				console.log(data);
				if (status) {
					return data;
				}
			},
			async loadSubcate(id) {
				let { status, data } = await Goods.subcate({ pId: id });
				if (status) {
					return data;
				};
			},
			// async handleCateChange(value) {
			// 	//获取二级分类
			// 	this.options_2nd = await this.loadSubcate(value);
			// 	//默认选中第二项
			// 	if (this.options_2nd.length) {
			// 		this.form.cate_2nd = this.options_2nd[0].id;
			// 	} else {
			// 		this.form.cate_2nd = '';
			// 	}
			// },
			handleRelease() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let { status, msg, } = await Article.release({ ...this.form });
						if (status) {
							this.$message.success(msg);
							this.$router.replace('/article/list')
						} else {
							this.$message.error(msg)
						};
					};
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	.hint {
		font-size: 12px;
		color: #999
	}

	.price {
		width: 160px;
	}

	.detial-title {
		background-color: #eee;
		padding: 10px;
		margin-bottom: 10px;
	}
</style>


<el-upload :action="uploadAction" :before-upload="handleBeforeUpload" :data="data" :headers="headers"
		:on-error="handleUploadError" :on-success="handleUploadSuccess" list-type="picture-card"
		class="avatar-uploader">
		<template v-if="src">
			
			<div class="cover" @click.stop="handleRemove"><i class="el-icon-delete avatar-uploader-icon"></i></div>
			<img :src="src" class="avatar" />
		</template>
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
